<template>
	<view>
		<view style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
			<image src="../../static/logo.png" style="width: 150rpx; height: 150rpx; margin-top: 50rpx;"></image>
			<view style="margin-top: 50rpx;">
				<view
					style="display: flex; align-items: center; padding-left: 30rpx; border-radius: 50rpx; box-shadow: 5rpx 5rpx 5rpx 5rpx #f5f5f5; width: 500rpx; height: 80rpx;">
					<image src="../../static/yh.png" style="width: 45rpx; height: 50rpx;"></image>
					<view style="width: 1rpx; height: 50rpx; background-color: #666; margin-left: 20rpx;"></view>
					<u--input style="margin-left: 10rpx; margin-right: 30rpx;" placeholder="请输入账号" border="none"
						:clearable="true" v-model="zh"></u--input>
				</view>
				<view
					style="display: flex; align-items: center; margin-top: 30rpx; padding-left: 30rpx; border-radius: 50rpx; box-shadow: 5rpx 5rpx 5rpx 5rpx #f5f5f5; width: 500rpx; height: 80rpx;">
					<image src="../../static/yh.png" style="width: 45rpx; height: 50rpx;"></image>
					<view style="width: 1rpx; height: 50rpx; background-color: #666; margin-left: 20rpx;"></view>
					<u--input style="margin-left: 10rpx; margin-right: 30rpx;" placeholder="请输入昵称" border="none"
						:clearable="true" v-model="nc"></u--input>
				</view>
				<view
					style="display: flex; align-items: center; margin-top: 30rpx; padding-left: 30rpx; border-radius: 50rpx; box-shadow: 5rpx 5rpx 5rpx 5rpx #f5f5f5; width: 500rpx; height: 80rpx;">
					<image src="../../static/sjh.png" style="width: 45rpx; height: 50rpx;"></image>
					<view style="width: 1rpx; height: 50rpx; background-color: #666; margin-left: 20rpx;"></view>
					<u--input style="margin-left: 10rpx; margin-right: 30rpx;" placeholder="请输入手机号" border="none"
						:clearable="true" v-model="sjh" type="number"></u--input>
				</view>
				<view
					style="display: flex; align-items: center; margin-top: 30rpx; padding-left: 30rpx; border-radius: 50rpx; box-shadow: 5rpx 5rpx 5rpx 5rpx #f5f5f5; width: 500rpx; height: 80rpx;">
					<image src="../../static/yx.png" style="width: 45rpx; height: 50rpx;"></image>
					<view style="width: 1rpx; height: 50rpx; background-color: #666; margin-left: 20rpx;"></view>
					<u--input style="margin-left: 10rpx; margin-right: 30rpx;" placeholder="请输入电子邮箱" border="none"
						:clearable="true" v-model="yx"></u--input>
				</view>
				<view
					style="display: flex; margin-top: 30rpx; align-items: center; padding-left: 30rpx; border-radius: 50rpx; box-shadow: 5rpx 5rpx 5rpx 5rpx #f5f5f5; width: 500rpx; height: 80rpx;">
					<image src="../../static/mm.png" style="width: 45rpx; height: 50rpx;"></image>
					<view style="width: 1rpx; height: 50rpx; background-color: #666; margin-left: 20rpx;"></view>
					<u--input v-if="mmxszt==0" style="margin-left: 10rpx; margin-right: 20rpx;" placeholder="请输入密码" border="none" 
						password type="text" v-model="mm" @change="mmsr"></u--input>
					<u--input  v-else style="margin-left: 10rpx; margin-right: 20rpx;" placeholder="请输入密码" border="none" 
						 type="text" v-model="mmm" @change="mmmsr"></u--input>
					<image v-if="mmxszt==0" @click="qhmmxszt(0)" src="../../static/show_psw_press.png"
						style="width: 40rpx; height: 25rpx; margin-right: 30rpx;"></image>
					<image v-else @click="qhmmxszt(1)" src="../../static/show_psw.png"
						style="width: 40rpx; height: 25rpx; margin-right: 30rpx;"></image>
				</view>
				<view
					style="display: flex; margin-top: 30rpx; align-items: center; padding-left: 30rpx; border-radius: 50rpx; box-shadow: 5rpx 5rpx 5rpx 5rpx #f5f5f5; width: 500rpx; height: 80rpx;">
					<image src="../../static/mm.png" style="width: 45rpx; height: 50rpx;"></image>
					<view style="width: 1rpx; height: 50rpx; background-color: #666; margin-left: 20rpx;"></view>
					<u--input v-if="mmxszt2==0" style="margin-left: 10rpx; margin-right: 20rpx;" placeholder="请输入密码" border="none" 
						password type="text" v-model="mm2" @change="mmsr2"></u--input>
					<u--input  v-else style="margin-left: 10rpx; margin-right: 20rpx;" placeholder="请输入密码" border="none" 
						 type="text" v-model="mmm2" @change="mmmsr2"></u--input>
					<image v-if="mmxszt2==0" @click="qhmmxszt2(0)" src="../../static/show_psw_press.png"
						style="width: 40rpx; height: 25rpx; margin-right: 30rpx;"></image>
					<image v-else @click="qhmmxszt2(1)" src="../../static/show_psw.png"
						style="width: 40rpx; height: 25rpx; margin-right: 30rpx;"></image>
				</view>

				
			</view>
		</view>
		<view style="position: absolute; bottom: -10rpx;">
			<image src="../../static/login_back.png" style="width: 1200rpx; height: 200rpx;"></image>
		</view>

		<up-button @click="dl" color="#3C87FC"
			style="width: 530rpx;  border-radius: 50rpx; height: 80rpx; margin-top: 40rpx; box-shadow: 5rpx 5rpx 5rpx 5rpx #f5f5f5; font-size: 30rpx;">提交</up-button>
	</view>
</template>

<script>
	import api from "../../common/api.js"
	export default {
		data() {
			return {
				zh: "",
				mm: "",
				mm2: "",
				mmm: "",
				mmm2: "",
				mmxszt: 0,
				mmxszt2: 0,
				nc:"",
				sjh:"",
				yx:""
			}
		},
		methods: {
			tzzc(){
				uni.navigateTo({
					url: 'zczh',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			tzwj(){
				uni.navigateTo({
					url: 'zczh',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			qhmmxszt(a) {
				if (a == 0) {
					this.mmxszt = 1
				} else {
					this.mmxszt = 0
				}
			},
			qhmmxszt2(a) {
				if (a == 0) {
					this.mmxszt2 = 1
				} else {
					this.mmxszt2 = 0
				}
			},
			mmsr(a) {
				this.mmm = a
			},
			mmmsr(a) {
				this.mmm = a
			},
			mmsr2(a) {
				this.mmm2 = a
			},
			mmmsr2(a) {
				this.mmm2 = a
			},
			dl() {
				if(this.sjh.length == 11){
					if(this.mm == this.mm2){
						uni.showToast({
							icon:"loading",
							title: '登录中...'
						});
						api.get("/moblie/register", "POST", {
							"userName": this.zh,
							"nickName": this.nc,
							"phonenumber": this.sjh,
							"email": this.yx,
							"password": this.mm
						}).then(s => {
							console.log(s);
							if (s.code == "200") {
								uni.showToast({
									title: '注册完成'
								});
								uni.navigateBack()
							} else {
								uni.showToast({
									icon:"error",
									title: s.msg
								});
							}
						})
					}else{
						uni.showToast({
							icon:"error",
							title: "两次输入的密码不一致！"
						});
					}
				}else{
					uni.showToast({
						icon:"error",
						title: "手机号格式错误!"
					});
				}
				
				
			}
		}
	}
</script>

<style>

</style>